<template>
  <el-select v-model="data.value" clearable class="m-0" :multiple="multiple" :disabled="data.isdisabled" :placeholder="placeholder" size="small" @change="advancedSelect">
    <el-option v-for="item in options" :key="getId(item)" :label="getLabel(item)" :value="getId(item)">
    </el-option>
  </el-select>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'

export default defineComponent({
  components: {},
  emits: {
    changeValue: null,
  },
  props: {
    options: {
      type: Object,
      required: true,
    },
    placeholder: {
      type: String,
    },
    selectValue: {
      type: String,
    },
    disabled:{
      type:Number
    },
    multiple: {  // 是否多选  false 单选  true 多选
      type: Boolean
    }
  },
  model: {
    prop: 'value',
    event: 'changes',
  },
  setup(props, { emit }) {
    const data = reactive({
      value: props.selectValue,
      isdisabled:props.disabled == 1,
    })

    // watch(
    //   () => props.selectValue,
    //   (newVal, oldVal) => {
    //     data.value =newVal
    //   }
    // )

    watch(props, (newValue, oldValue) => {
      data.value = newValue.selectValue
    });

    // 监听数据发生变化
    let dataList: any = ref(props.options)
    watch(
        () => props.options,
        (newVal, oldVal) => {
          changeList(newVal)
        }
    )
    const changeList = (value) => {
      dataList.value = value
    }

    const advancedSelect = (value) => {
      let list = JSON.parse(JSON.stringify((dataList.value)))
      // console.log(list,value)
      for (let key in list) {
        if (value == list[key].itemText || value == list[key].id) {
          emit('changeValue', list[key])
          return
        }
        if (value == list[key].name || value == list[key].id) {
          emit('changeValue', list[key])
          return
        }
        if (value == list[key].userId || value == list[key].userName) {
          // console.log(list[key])
          emit('changeValue', list[key])
          return
        }
        if (value == list[key].roleId || value == list[key].roleName) {
          // console.log(list[key])
          emit('changeValue', list[key])
          return
        }
      }
      if(value==""){
        emit('changeValue', '')
      }
    }

    const getId = (item)=>{
      // let id = item.id?item.id:item.roleId?item.roleId:item.userId?item.userId:item.itemValue
      let id = item.id?item.id:item.userId?item.userId:item.roleId
      // console.log(id,11111)
      return id
    }

    const getLabel = (item)=>{
      let value = item.itemText?item.itemText:item.name?item.name:item.roleName?item.roleName:item.userName?item.userName:item.username?item.username:item.projectname?item.projectname:item.allName
      // console.log(value,22222)
      return value
    }

    return {
      advancedSelect,
      // selectValue,
      data,
      dataList,
      getId,
      getLabel
    }
  },
})
</script>

<style scoped lang="scss"></style>
